<template>
  <div class="recyclingStation" id="recyclingStation">
    <div class="timePicker">
      <!-- <a-range-picker show-time v-model:value="timeValue" :valueFormat="valueFormat" @change="changeTime" /> -->
      <span style="font-size: 14px;color:#333"><span style="margin-right: 12px;">删除时间:</span><date-range-picker
          v-model:value="timeValue" :valueFormat="valueFormat" :showTime="true" :disabledInfo="disabledInfo"
          @change="changeTime"></date-range-picker>
      </span>
      <span>
        <a-input v-model:value="searchTitle" placeholder="搜索内容标题" style='width:192px;height:32px; margin-left: 16px;'
          @blur="fetchContentRecyclePage">
          <template #suffix>
            <i class="iconfont icon-search" @click="fetchContentRecyclePage"></i>
          </template>
        </a-input>
      </span>
    </div>
    <treeTable :columns="columns.recyclingStationColumn" :dataSource="resData.records" :isSelect="true" :scroll="scroll"
      ref="tagBaseTables" :isShowPagination="isShowPagination" :simple="true" :showCheckDelete="showCheckDelete"
      :total="resData.total" @changePage="changePage">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'oparation'">

          <!-- <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="recleContent([record.id])">
            <template #title>
              <p style="width: 197px">是否还原此内容</p>
            </template> -->
          <a class="eidtRecords" :class="{ disable: !btnPerm.includes('restoreAble') }"
            @click="recleContent(record)">还原</a>
          <!-- </a-popconfirm> -->
          <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" :disabled="!btnPerm.includes('deleteAble')"
            @confirm="confirmDelete([record.id])">
            <template #title>
              <p style="width: 197px">删除后不可恢复，您确定删除？</p>
            </template>
            <a :class="{ disable: !btnPerm.includes('storeDeleteAble') }">删除</a>
          </a-popconfirm>
        </template>
      </template>
      <template #otherOpration>
        <a-button :style="{ 'margin-left': '8px' }" @click="reductionRecords(tagBaseTables.selectedRowKeys)"
          :disabled="!rowSelection.length || !btnPerm.includes('restoreAble')">还原</a-button>
        <a-button :style="{ 'margin-left': '8px' }" @click="deleteSelectedAll"
          :disabled="!rowSelection.length || !btnPerm.includes('storeDeleteAble')">删除</a-button>
      </template>
    </treeTable>
    <!-- 还原弹窗 -->
    <contentRestore v-if="isRestoreVisible" :isVisible="isRestoreVisible" :contentIds="contentId" @handleOk="handleOk"
      @handleCancle="isRestoreVisible = false" :channelId="channelId_recycle"></contentRestore>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, createVNode, computed, watch } from "vue";
import treeTable from "@/components/table/baseTable.vue";
import columns from "@/components/table/tableConfig/tableColumn/contentManageColumn";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { scrollType, configDataType } from "@/type.d";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { Modal, message } from "ant-design-vue";
import dateRangePicker from "@/components/picker/dateRangePicker.vue"
import request from "@/api/index";
import contentRestore from '@/c-views/content//contentRestore.vue';
import { routerPerm } from '@/utils/common';
const btnPerm = ref<any[]>([]);
interface dataSourceType {
  [propName: string]: any;
}
//data
const props = defineProps({
  channelId: {
    type: [Number, String],
    default: null
  }
})
const contentId = ref<any[]>([]); // 内容id
const channelId_recycle = ref<number | string>(); // 原属栏目id
let isRestoreVisible = ref<boolean>(false) // 控制回收站还原弹窗
const isShowPagination = ref<boolean>(true); // 是否需要配分页器
const showCheckDelete = true; // 是否需要分页器中的自定义
let resData = reactive<configDataType>({ total: 0, size: 10, records: [] });
let scroll: scrollType = reactive({ y: "", isFixed: false });
const timeValue = ref<(string | number)[]>([]);
const valueFormat = ref("YYYY-MM-DD HH:mm:ss");
const searchTitle = ref('');
const tagBaseTables = ref<any>(null);
let rowSelection = ref<(string | number)[]>([]);
let params: dataSourceType = reactive({
  //头部筛选请求参数格式
  pageNumber: 1,
  pageSize: 10,
  channelId: props.channelId || null,
});
//日期组件
const disabledInfo = reactive({//日期禁选
  type: 2,
  startDays: 0,
});
//computed
rowSelection = computed(() => {
  return tagBaseTables.value.selectedRowKeys;
});
//methods
const fetchContentRecyclePage = async () => {
  params.title = searchTitle.value;
  const data = await request.fetchContentRecyclePage(params);
  resData.total = data.total;
  resData.records = data.records;
  tagBaseTables.value.selectedRowKeys = [];
  nextTick(() => {
    let obj = getTableScroll(74, "recyclingStation", 80);
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};
const changeTime = (data: any) => {
  if (data) {
    params.deleteTimeStart = data[0];
    params.deleteTimeEnd = data[1];
  } else {
    params.deleteTimeStart = undefined;
    params.deleteTimeEnd = undefined;
  }
  fetchContentRecyclePage();
};
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  params.pageNumber = data.pageCurrent;
  params.pageSize = data.pageSize;
  fetchContentRecyclePage();
};

const handleOk = () => {
  isRestoreVisible.value = false
  fetchContentRecyclePage()
  console.log('ok');
}

// 还原
const reductionRecords = async (item: any) => {
  isRestoreVisible.value = true
  contentId.value = item
  console.log(item, '批量还原');
};

//单个还原
const recleContent = (item: any) => {
  if (!btnPerm.value.includes('restoreAble')) return
  isRestoreVisible.value = true
  contentId.value = [item.id]
  channelId_recycle.value = item.channelId

}

// 删除
const confirmDelete = async (datas: any) => {
  if (!btnPerm.value.includes('storeDeleteAble')) return
  request
    .fetchContentDelete({ ids: datas })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        fetchContentRecyclePage();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
// 删除多个
const deleteSelectedAll = async (item: any) => {
  Modal.confirm({
    content: "删除后不可恢复，您确定删除？",
    centered: true,
    icon: createVNode("i", {
      class: "iconfont icon-warn warning_ICON",
    }),
    cancelText: "取消",
    okText: "确定",
    onOk: async () => {
      confirmDelete(tagBaseTables.value.selectedRowKeys);
    },
    onCancel() { },
  });
};

// 切换栏目右侧列表同步显示
watch(() => props.channelId, (newVal, oldVal) => {
  params.channelId = newVal;
  fetchContentRecyclePage();
})
onMounted(() => {
  btnPerm.value = routerPerm();
  fetchContentRecyclePage();
});
</script>

<style lang="less" scoped>
.recyclingStation {
  background-color: #fff;
  padding: 24px;
  // height: calc(100% - 100px);
  // overflow: hidden;
  // display: flex;
  // flex-direction: column;

  .eidtRecords {
    margin-right: 16px;
  }

  .timePicker {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
  }
}

.ant-btn:hover {
  background-color: red;
  // color: pink;
  // border: 1px solid red;
}
::v-deep(.ant-table-cell:nth-last-child(1)) {
  text-align: right;
}
</style>
